<template>
	<view>
		<!-- 返回 -->
		<view class="backs">
			<view @click="backlast()">
				<image src="../../static/back1.png"></image>
			</view>
		</view>
		<!-- 背景色区域 -->
		<view class="titleNview-background"  v-if="imgurl"  :style="'background: url('+imgurl+'/wximg/bjTop2.png'+'); background-size: 100%;'" ></view>

		<view class="content" style="{minHeight: heightContent +'px'}">
			<view style="border-bottom: solid 1px #e7e7e7;">
				<view class="tableModel" style="padding-top: 60upx; padding-bottom: 20upx; border-bottom: solid 1px #e7e7e7;">
					<view class="tableOne">
						<view class="yx1">
							<image v-if="imgurl" :src="imgurl+'/wximg/persons.png'"></image>
						</view>
						<text>配送员</text>
						<text>{{carUserNum}}人</text>
					</view>
					<view class="tableLine"></view>
					<view class="tableOne">
						<view class="yx3">						
							<image  v-if="imgurl"  :src="imgurl+'/wximg/sh.png'"></image>						
						</view>
						<text>商户</text>
						<text>{{shopNum}}户</text>
					</view>
				</view>
				<view class="tableModel">
					<view class="tableOne">
						<view class="yx5">
							<image  v-if="imgurl"  :src="imgurl+'/wximg/xy.png'"></image>
						</view>
						<text>今日包裹数</text>
						<text>{{pageNum}}个</text>
					</view>
					<view class="tableLine"></view>
					<view class="tableOne">
						<view class="yx7">
							<image  v-if="imgurl"  :src="imgurl+'/wximg/car01.png'"></image>
						</view>
						<text>车辆数</text>
						<text>{{carNum}}辆</text>
					</view>
				</view>
			</view>
			<view style="border-bottom: solid 1px #e7e7e7; margin-bottom: 50upx; padding-bottom: 50upx">
				<view class="uni-title">每日配送量</view>
				<view class="qiun-charts">
					<!--#ifdef MP-ALIPAY -->
					<canvas canvas-id="canvasArea" id="canvasArea" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
					 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchIt($event,'canvasArea')"></canvas>
					<!--#endif-->
					<!--#ifndef MP-ALIPAY -->
					<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchIt($event,'canvasArea')"></canvas>
					<!--#endif-->
				</view>
			</view>
			<view style="border-bottom: solid 1px #e7e7e7; margin-bottom: 50upx; padding-bottom: 50upx;">
				<view class="uni-title">配送区域</view>
				<view class="qiun-charts">
					<!--#ifdef MP-ALIPAY -->
					<canvas canvas-id="canvasPie" id="canvasPie" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
					 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchPie($event,'canvasPie')"></canvas>
					<!--#endif-->
					<!--#ifndef MP-ALIPAY -->
					<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie($event,'canvasPie')"></canvas>
					<!--#endif-->
				</view>
			</view>
			<view style=" margin-bottom: 50upx;  padding-bottom: 50upx">
				<view class="uni-title">最近一周各项所占百分比</view>
				<view class="qiun-charts">
					<!--#ifdef MP-ALIPAY -->
					<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
					 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchPie($event,'canvasRadar')"></canvas>
					<!--#endif-->
					<!--#ifndef MP-ALIPAY -->
					<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts" @touchstart="touchPie($event,'canvasRadar')"></canvas>
					<!--#endif-->
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import uCharts from '@/u-charts/u-charts.min.js';
	import {selectAllInfo} from '@/api/request.js';
	import service from '../../service.js';
	import imgurl from '@/api/url.js';
	
	var user=service.getUsers().user;
	var _self;
	var canvasObj = {};
	export default {
		data() {
			return {
				imgurl:"imgurl",
				cWidth: '',
				cHeight: '',
				carNum:'',
				carUserNum:'',
				pageNum:'',
				shopNum:'',
				pixelRatio: 1,
				serverData: '',
				itemCount: 30, //x轴单屏数据密度
				asd: {
					"success": true,
					"Area": {
						"categories": [],
						"series": [{
							"name": "配送量",
							"data": [],
							"color": "#facc14"
						}, {
							"name": "验签量",
							"data": [],
							"color": "#2fc25b"
						}, {
							"name": "未送达",
							"data": [],
							"color": "#2fc00b"
						}, {
							"name": "已送达",
							"data": [],
							"color": "#facc28"
						}]
					},
					"Pie": {
						"series": [{
							"name": "商业(集贸)区",
							"data": 100
						}, {
							"name": "工业区",
							"data": 159
						}, {
							"name": "学区",
							"data": 50
						}, {
							"name": "政务(商务)区",
							"data": 70
						}, {
							"name": "居民区(村)",
							"data": 197
						}, {
							"name": "娱乐(旅游)区",
							"data": 280
						}, {
							"name": "旅客中转区",
							"data": 158
						}, {
							"name": "其他",
							"data": 305
						}]
					},
					"Radar": {
						// "categories": ["公司好评", "配送好评", "自营车量", "问题货物","配送数量"],
						// "series": [{
						// 	"name": "所占百分比",
						// 	"data": [89, 46, 5, 72, 39]
						// }]
						"categories": ["一星评价", "二星评价", "三星评价", "四星评价","五星评价"],
						"series": [{
							"name": "百分比值",
							"data": [50, 88, 63, 25, 72]
						}]
						/* "series": [{
							"name": "对公司评价",
							"data": [89, 46, 5, 72, 39]
						},{
							"name": "对配送员评价",
							"data": [50, 88, 63, 25, 72]
						}] */
					},
				}
			}
		},
		onLoad() {
			// this.init();
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(650); //之前750
			this.cHeight = uni.upx2px(500);
			user=service.getUsers().user;
			this.imgurl=imgurl();
			this.init();
		},
		onReady() {
			
		},
		methods: {
			// 返回上一层
			backlast(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			
			format:val=>{return val.toFixed(2)},
			
			init(){ //初始化加载
				let  param={
					userid:user.id
				};
				selectAllInfo(param).then(res => {
					uni.showLoading({
						title: "正在加载数据..."
					})
					if (res.code == 200) {
						//一
						this.carNum = res.map.selectLeadOne.carNum
						this.carUserNum = res.map.selectLeadOne.carUserNum
						this.shopNum = res.map.selectLeadOne.shopNum
						this.pageNum = res.map.selectLeadOne.pageNum
						//二
						let daylist = []
						let seriesone = []
						let seriestwo = []
						let seriesthree = []
						let seriesfour = []
						res.map.selectLeadTwo.forEach(function (curItem, i) {
							seriesone.push(parseInt(curItem.allNum))
							seriestwo.push(parseInt(curItem.endNum))
							console.log(curItem.undelivered)
							seriesthree.push(parseInt(curItem.undelivered))
							seriesfour.push(parseInt(curItem.delivered))
							daylist.push(curItem.today)
						})
						this.asd.Area.series[0].data = seriesone
						this.asd.Area.series[1].data = seriestwo
						this.asd.Area.series[2].data = seriesthree
						this.asd.Area.series[3].data = seriesfour
						this.asd.Area.categories = daylist
						//三
						let three = res.map.selectLeadThree
						this.asd.Pie.series = [ { "name": "商业(集贸)区", "data": three.businessNum }, 
												{ "name": "工业区", "data": three.industrialNum }, 
												{ "name": "学区", "data": three.schoolNum }, 
												{ "name": "政务(商务)区", "data": three.governmentNum }, 
												{ "name": "居民区(村)", "data": three.residentsNum }, 
												{ "name": "娱乐(旅游)区", "data": three.entertainmentNum }, 
												{ "name": "旅客中转区", "data": three.passengersNum }, 
												{ "name": "其他", "data": three.otherNum }]
						
						let four = res.map.selectLeadFour
						// this.asd.Radar.series = [{ "name": "对公司评价", "data": [four.firmone, four.governmentNum, four.businessNum, four.industrialNum, four.schoolNum]},
						// { "name": "对配送员评价", "data": [four.staffone, four.residentsNum, four.entertainmentNum, four.passengersNum, four.otherNum]}]
						// this.wait(1000).then(() => {
							
						// })
						let five = res.map.selectLeadFive
						let six = res.map.selectLeadSix
						
						this.asd.Radar.categories = ["公司好评", "配送好评", "调配任务", "问题货物","配送异常"]
						this.asd.Radar.series = [{ "name": "百分比", "data": [five.firmone, five.staffone, five.otherNum, six.staffone, five.residentsNum]}]
						this.fillData(this.asd);
						//this.loading = false
						uni.hideLoading();
					} else{
						
					}
				}).catch(err => {
					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
			},
			

			getday(day){
				let date = new Date();
				date.setTime(date.getTime()-day*24*60*60*1000)
				return date.getMonth()+1+"-"+date.getDate()
			},
			
			wait(time) {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve()
					}, time)
				})
			},
	
	
			toJSON(){
				
			},
			getServerData() {
				uni.showLoading({
					title: "正在加载数据..."
				})
				uni.request({
					// url: 'https://www.ucharts.cn/data.json',
					data: {},
					success: function(res) {
						_self.fillData(res.data.data);
					},
					fail: () => {
						_self.tips = "网络错误，小程序端请检查合法域名";
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			fillData(data) {
				this.serverData = data;
				this.tips = data.tips;
				// this.sliderMax = data.Candle.categories.length;
				let Area = {
					categories: [],
					series: []
				};
				let Pie = {
					series: []
				};

				let Radar = {
					categories: [],
					series: []
				};

				Area.categories = data.Area.categories;
				Area.series = data.Area.series;
				Pie.series = data.Pie.series;
				Radar.categories = data.Radar.categories;
				Radar.series = data.Radar.series;
				this.showArea("canvasArea", Area);
				this.showPie("canvasPie", Pie);
				this.showRadar("canvasRadar", Radar);
			},

			showArea(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					padding: [0, 20, 10, 15],
					legend: {
						show: true,
						position: 'top',
						float: 'center',
						itemGap: 30,
						padding: 5,
						lineHeight: 18,
						margin: 0,
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						boundaryGap: 'justify' //两端不留白配置
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						data:[{
							format:val=>{return val.toFixed(1)}
						}],
						
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2
						}
					}
				});
			},

			showPie(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					padding: [15, 15, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 15,
						margin: 0,
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
							lableWidth: 15
						}
					},
				});
			},

			showRadar(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'radar',
					fontSize:11,
					padding: [15, 15, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: false,
					dataLabel: true,
					categories: chartData.categories,
					series: chartData.series,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						radar: {
							 max: 100
						}
					}
				});
			},
			// 留着
			touchIt(e, id) {
				canvasObj[id].touchLegend(e, {
					animation: false
				});
				canvasObj[id].showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					}
				});
			},
			// 留着
			touchPie(e, id) {
				canvasObj[id].showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			},
		}
	}
</script>

<style scoped>
	.backs {
		position: absolute;
		z-index: 11111;
		top: 85upx;
		left: 30upx;
		display: flex;
		color: #000;
		line-height: 30upx;
		align-items: center;
		display: inline-block;
	}
	
	.backs image {
		width:45upx;
		height:45upx;
		margin-right: 14upx;
	}

	.titleNview-background {
		width: 100%;
		height: 600upx;
		-webkit-transition: .4s;
		transition: .4s;
		background-size: 100% 100%;
		position: relative;
	}

	.content {
		position: relative;
		width: 86%;
		margin: -50% auto 0;
		z-index: 2;
		padding: 0 4%;
		border-radius: 27upx;
		background-color: #fff;
		box-shadow: 0 5px 5px rgba(227, 227, 227, .5);
		margin-bottom: 80upx;
	}

	.tableModel {
		width: 100%;
		display: flex;
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30upx;
	}

	.tableOne {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: #333;
		white-space: nowrap;
		font-size: 32upx;
		text-align: center;
		align-items: center;
		align-content: center;
	}

	.tableOne text:first-child {
		color: #333;
	}

	.tableOne text:last-child {
		color: #007457;
		font-size: 36upx;
	}

	.tableOne text {
		line-height: 50upx;
	}

	.tableLine {
		width: 1px;
		height: 250upx;
		background-color: #e7e7e7;
		margin-bottom: 20upx;
	}

	.yx1,
	.yx3,
	.yx5,
	.yx7 {
		width: 0;
		height: 0;
		padding-bottom: 50%;
		padding-left: 50%;
		border-radius: 80%;
		position: relative;
		margin-bottom: 20upx;
		z-index:4;
		display: block;
	}

	/* .yx2,
	.yx4,
	.yx6,
	.yx8 {
		width: 0;
		height: 0;
		padding-bottom: 80%;
		padding-left: 80%;
		border-radius: 80%;
		position: absolute;
		left: 10%;
		top: 10%;
		z-index: 999;
		display: block;
	} */

	.yx1 {
		background-color: rgb(0, 116, 87, .1)
	}

	.yx2 {
		background-color: rgb(0, 116, 87, .15)
	}

	.yx3 {
		background-color: rgb(223, 74, 80, .1)
	}

	.yx4 {
		background-color: rgb(223, 74, 80, .15)
	}

	.yx5 {
		background-color: rgb(40, 198, 199, .1)
	}

	.yx6 {
		background-color: rgb(40, 198, 199, .15)
	}

	.yx7 {
		background-color: rgb(246, 156, 60, .1)
	}

	.yx8 {
		background-color: rgb(246, 156, 60, .15)
	}

	.yx1 image,
	.yx3 image,
	.yx5 image,
	.yx7 image {
		width: 50%;
		height: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -25%;
		margin-top: -25%;
		z-index: 99999;
	}

	/* 新添加 */
	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}


	/* 通用样式 */
	.qiun-charts {
		width: 100%;
		height: 500upx;
	}

	.charts {
		width: 100%;
		height: 500upx;
	}

</style>
